<template>
    <el-row :gutter="12" class="sch-count">
        <el-col :span="6">
            <div class="count-item flexbox flexcenter count-bg1">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
                    <circle cx="16" cy="16.5" r="14" fill="url(#paint0_linear_12552_18565)" />
                    <path opacity="0.5" d="M14.5221 16.0776C14.3085 15.7639 14.0094 15.5 13.6586 15.5H10V20.6333C10 21.6643 10.741 22.5 11.6552 22.5H20.3448C21.259 22.5 22 21.6643 22 20.6333V15.5H18.3414C17.9906 15.5 17.6915 15.7639 17.4779 16.0776C17.1375 16.5777 16.6021 16.9 16 16.9C15.3979 16.9 14.8625 16.5777 14.5221 16.0776Z" fill="url(#paint1_linear_12552_18565)" />
                    <path d="M22 15.5L20.6878 11.5361C20.4848 10.9228 19.8353 10.5 19.0963 10.5H12.9037C12.1647 10.5 11.5152 10.9228 11.3122 11.5361L10 15.5" stroke="#C9D2E6" stroke-width="1.42222" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M14.5221 16.0776C14.3085 15.7639 14.0094 15.5 13.6586 15.5H10V20.6333C10 21.6643 10.741 22.5 11.6552 22.5H20.3448C21.259 22.5 22 21.6643 22 20.6333V15.5H18.3414C17.9906 15.5 17.6915 15.7639 17.4779 16.0776C17.1375 16.5777 16.6021 16.9 16 16.9C15.3979 16.9 14.8625 16.5777 14.5221 16.0776Z" stroke="#C9D2E6" stroke-width="1.42222" stroke-linecap="round" stroke-linejoin="round" />
                    <defs>
                        <linearGradient id="paint0_linear_12552_18565" x1="16" y1="2.5" x2="16" y2="30.5" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#47587F" />
                            <stop offset="1" stop-color="#141F3A" />
                        </linearGradient>
                        <linearGradient id="paint1_linear_12552_18565" x1="16" y1="15.5" x2="16" y2="22.5" gradientUnits="userSpaceOnUse">
                            <stop stop-color="white" stop-opacity="0" />
                            <stop offset="1" stop-color="white" />
                        </linearGradient>
                    </defs>
                </svg>
                <div class="count-info">
                    <div class="count-name">项目总数</div>
                    <div class="count-data">{{countData.project_num}}</div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="count-item flexbox flexcenter count-bg2">
                <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
                    <circle cx="16.5" cy="16.5" r="14" fill="#141F3A" />
                    <path d="M12.6896 23H20.3103C21.3006 23 22.1034 22.1972 22.1034 21.2069V13.8103L18.293 10H12.6896C11.6993 10 10.8965 10.8028 10.8965 11.7931V21.2069C10.8965 22.1972 11.6993 23 12.6896 23Z" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path opacity="0.21" d="M12.6896 23H20.3103C21.3006 23 22.1034 22.1972 22.1034 21.2069V13.8103L18.293 10H12.6896C11.6993 10 10.8965 10.8028 10.8965 11.7931V21.2069C10.8965 22.1972 11.6993 23 12.6896 23Z" fill="url(#paint0_linear_12552_12480)" />
                    <path d="M21.8792 14.035H18.0688V10.2246" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M14.4829 19.4141H18.5174" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M14.4829 16.7246H18.5174" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <defs>
                        <linearGradient id="paint0_linear_12552_12480" x1="16.4999" y1="10" x2="16.4999" y2="23" gradientUnits="userSpaceOnUse">
                            <stop stop-color="white" stop-opacity="0" />
                            <stop offset="1" stop-color="white" />
                        </linearGradient>
                    </defs>
                </svg>
                <div class="count-info flex">
                    <div class="count-name">产能总数</div>
                    <div class="count-data flexbox flexcenter">
                        {{countData.capacity_num}}
                        <div class="flex process-box">
                            <el-progress :percentage="countData.progress_num" :stroke-width="12" class="sch-progress"></el-progress>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="count-item flexbox flexcenter count-bg3">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
                    <circle cx="16" cy="16.5" r="14" fill="#141F3A" />
                    <path d="M23.5 16.75C23.5 20.7541 20.2541 24 16.25 24C12.2459 24 9 20.7541 9 16.75C9 12.7459 12.2459 9.5 16.25 9.5C20.2541 9.5 23.5 12.7459 23.5 16.75Z" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path opacity="0.21" d="M23.5 16.75C23.5 20.7541 20.2541 24 16.25 24C12.2459 24 9 20.7541 9 16.75C9 12.7459 12.2459 9.5 16.25 9.5C20.2541 9.5 23.5 12.7459 23.5 16.75Z" fill="url(#paint0_linear_12552_25876)" />
                    <path d="M18.5 14.75C18.5 15.9926 17.4926 17 16.25 17C15.0074 17 14 15.9926 14 14.75C14 13.5074 15.0074 12.5 16.25 12.5C17.4926 12.5 18.5 13.5074 18.5 14.75Z" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M11.4473 21.75C12.5937 20.375 14.3196 19.5 16.2498 19.5C18.18 19.5 19.9059 20.375 21.0524 21.75" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <defs>
                        <linearGradient id="paint0_linear_12552_25876" x1="16.25" y1="9.5" x2="16.25" y2="24" gradientUnits="userSpaceOnUse">
                            <stop stop-color="white" stop-opacity="0" />
                            <stop offset="1" stop-color="white" />
                        </linearGradient>
                    </defs>
                </svg>
                <div class="count-info">
                    <div class="count-name">参与人员总数</div>
                    <div class="count-data">{{countData.user_num}}</div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="count-item flexbox flexcenter count-bg4">
                <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
                    <circle cx="16.5" cy="16.5" r="14" fill="#141F3A" />
                    <path d="M10.5 12.1552C10.5 11.241 11.241 10.5 12.1552 10.5H20.8448C21.759 10.5 22.5 11.241 22.5 12.1552V20.8448C22.5 21.759 21.759 22.5 20.8448 22.5H12.1552C11.241 22.5 10.5 21.759 10.5 20.8448V12.1552Z" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path opacity="0.21" d="M10.5 12.1552C10.5 11.241 11.241 10.5 12.1552 10.5H20.8448C21.759 10.5 22.5 11.241 22.5 12.1552V20.8448C22.5 21.759 21.759 22.5 20.8448 22.5H12.1552C11.241 22.5 10.5 21.759 10.5 20.8448V12.1552Z" fill="url(#paint0_linear_12552_14843)" />
                    <path d="M19.1894 16.5002L14.6377 13.8105V19.1899L19.1894 16.5002Z" stroke="#B8BECF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <defs>
                        <linearGradient id="paint0_linear_12552_14843" x1="16.5" y1="10.5" x2="16.5" y2="22.5" gradientUnits="userSpaceOnUse">
                            <stop stop-color="white" stop-opacity="0" />
                            <stop offset="1" stop-color="white" />
                        </linearGradient>
                    </defs>
                </svg>
                <div class="count-info">
                    <div class="count-name">未投放视频</div>
                    <div class="count-data">{{countData.undrop_num}}</div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    props:{
        countData:{
            type:Object,
            default:{
                project_num:0,
                user_num:0,
                capacity_num:0,
                finish_num:0,
                undrop_num:0,
                progress_num:0,
            }
        }
    },
    name: "",
    data() {
        return {
            
        };
    },
    created() {},
    methods: {},
    components: {},
};
</script>


<style scoped>
.sch-count {
    margin-top: 12px;
}
.count-item {
    height: 77px;
    border-radius: 12px;
    padding: 0 20px;
}
.count-bg1 {
    background-color: #ecf8f2;
}
.count-bg2 {
    background-color: #ebf8fe;
}
.count-bg3 {
    background-color: #f2eeff;
}
.count-bg4 {
    background-color: #e0f5f3;
}
.count-info {
    margin-left: 12px;
}
.count-name {
    font-size: 12px;
    color: #17233d;
    line-height: 16px;
}
.count-data {
    font-size: 24px;
    color: #17233d;
    font-weight: 700;
    line-height: 33px;
    height: 33px;
    margin-top: 4px;
}
.process-box{
    margin-left: 10px;
}
</style>
<style>
.sch-progress .el-progress-bar__outer{
    background-color: #fff;
}
.sch-progress .el-progress__text{
    color: #17233d;
    margin-left: 15px;
    font-size: 14px !important;
}
</style>
